<template>
	<view>
		<view>
			<!-- 轮播图区域 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, i) in images" :key="i">
					<view class="swiper-item">
						<image :src="item" class="responsive-image"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 折扣区域 -->
		<view class="zhekou">
			<view class="table-cell"><text style="font-size: 20px; font-weight: bold; padding: 10px">限时折扣</text></view>
			<view class="table-cell">
				<uni-countdown color="#FFFFFF" background-color="#b22104" border-color="#b22104" :day="1" :hour="2" :minute="30" :second="0"></uni-countdown>
			</view>
		</view>
		<view class="product-list">
			<!-- 数据显示列表 -->
			<view class="bottom-item" v-for="(item, index) in productData" :key="index" @click="goToDetail(item.productId)">
				<view class="item-container">
					<image class="bottom-image" mode="aspectFit" :src="item.img"></image>
					<view class="bottom-info" style="text-align: center">
						<view>
							<text class="bottom-name">【{{ item.productName }}】</text>
						</view>
						<text class="bottom-price">￥{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			images: ['/static/轮播1.jpg', '/static/轮播2.jpg'],
			productData: []
		};
	},
	onShow() {
		uni.request({
			method: 'GET',
			url: 'http://localhost:8080/product/findAllProductAll',
			header: {
				'content-type': 'application/json' 
			},
			success: (res) => {
				if (res.data.status === 200) {
					this.productData = res.data.data;
					console.log(this.productData);
				};
			},
			fail: (err) => {
				console.error('请求失败', err);
			}
		});
	},
	methods: {
		goToDetail(id) {
			console.log(id);
			const product = this.productData[id - 1];
			const encodedProductData = encodeURIComponent(JSON.stringify(product));
			console.log(encodedProductData);
			wx.navigateTo({
				url: `/pages/details/details?productData=${encodedProductData}`
			});
		}
	}
};
</script>
<style>
.swiper-item {
	width: 100%;
	height: 400rpx;
}
.responsive-image {
	width: 100%;
	height: 300rpx;
	object-fit: cover; /* 保持图片比例填充 */
}
.zhekou {
	margin-top: 20rpx;
	width: 100%;
	height: 45px;
	display: flex; 
	justify-content: space-between; /* 两端对齐 */
}
.product-list {
	display: flex;
	flex-wrap: wrap; /* 允许项目换行 */
	justify-content: space-between; 
	margin-left: 15px;
	margin-right: 20px;
}

.bottom-item {
	width: calc(33.333% - 10px); /* 每项宽度设为容器的三分之一减去间距 */
	margin-bottom: 10px; /* 项目底部间距 */
	box-sizing: border-box;
}

.item-container {
	width: 220rpx; /* 确保容器宽度充满其父容器 */
	height: 320rpx;
	padding: 0px; /* 内边距 */
	box-shadow: 4px 4px 9px 0px rgb(0 0 0 / 10%); /* 添加阴影效果 */
	border-radius: 4px; /* 边框圆角 */
	background-color: #ffffff; /* 背景颜色 */
}

.bottom-image {
	width: 100%;
	height: 100px; /* 根据需要设置高度 */
	border-radius: 4px 4px 0 0; /* 圆角，图片部分 */
}

.bottom-info {
	padding: 10px;
	text-align: left;
}

.bottom-name {
	font-size: 14px;
	color: #333;
}

.bottom-price {
	font-size: 16px;
	color: #e60012;
	margin-top: 5px;
}
</style>
